import { t } from 'i18next'
import React, { useEffect, useState } from 'react'
import { Tab, Search } from '@kedacom/react-next'
import { StyledMemberList } from './style'
import { ListItemGhost } from '@/pages/manager/components'
import { Draggable } from '@/plugins/dnd'
import { revert_mt } from '@/api/manager/mt'
import { useMccStore } from '@/pages/manager/store'
import { useDebounceEffect } from 'ahooks'
import AutoSizer from 'react-virtualized-auto-sizer'
import { FixedSizeList as List, ListChildComponentProps } from 'react-window'
import { useTableOftenStore } from '@/pages/manager/blocks/main/table/often/store'
import { useTableAllStore } from '@/pages/manager/blocks/main/table/all/store'
import { useTableInteractiveStore } from '@/pages/manager/blocks/main/table/interactive/store'
import { isCascadeTree } from '@/pages/manager/blocks/main/table/all/utils'
import { ListItem } from './listItem'
import { revert_meeting } from '@/api/manager/meeting'
import useGetList, { ItemData } from './useGetList'
import { useGlobalStore } from '@/store/global'

export interface MemberListProps {
	canDrag?: boolean
	height?: number
}
interface RowRendererProps extends ListChildComponentProps {
	data: {
		list: ItemData[]
		isCascade: boolean
		canDrag: boolean
		tab: string
		openMap: { [mtKey: string]: boolean }
		setOpenMap: (val: { [mtKey: string]: boolean }) => void
	}
}
const rowRenderer = React.memo(({ data, index, style }: RowRendererProps) => {
	const rowData = data.list[index]
	const dataTransfer = () => {
		return {
			data: {
				mt: rowData.mcc.isMt ? revert_mt(rowData.mcc) : revert_meeting(rowData.mcc),
			},
			from: 'memberList',
		}
	}
	return (
		<Draggable
			//非本级会议可拖拽
			canDrag={data.canDrag && rowData.mtKey !== '0.0.0.0_0'}
			dataTransfer={dataTransfer}
			ghostRender={<ListItemGhost data={rowData.mcc} />}
			style={style}
		>
			<ListItem
				isCascade={data.isCascade}
				openMap={data.openMap}
				tab={data.tab}
				setOpenMap={data.setOpenMap}
				{...rowData}
			/>
		</Draggable>
	)
})
/** 会控终端列表组件
 *  创会暂未实现
 */
export default function MemberList(props: MemberListProps) {
	const { canDrag = true, height = 390 } = props
	const superMtNum = useMccStore((state) => state.mccInfo.superMtNum)
	const [onlineList, setOnlineList] = useState<ItemData[]>([])
	const [searchVal, setSearchVal] = useState('')
	const [tab, setTab] = useState('all')
	const [actualSearchVal, setActualSearchVal] = useState('')
	const handleSearch = (val: string) => {
		setSearchVal(val)
	}
	useDebounceEffect(
		() => {
			setActualSearchVal(searchVal)
		},
		[searchVal],
		{
			wait: 250,
		}
	)
	const tableAll = useTableAllStore((state) => state.tree)
	const tableOften = useTableOftenStore((state) => state.list)
	const tableInteractive = useTableInteractiveStore((state) => state.list)
	const isCascade = isCascadeTree(tableAll)
	const { list, openMap, setOpenMap, getListFromTableAll, getListFromTable } = useGetList()
	const SWITCH = useGlobalStore((state) => state.SWITCH)
	useEffect(() => {
		if (superMtNum === 0 && tab === 'all') {
			getListFromTableAll(tableAll, actualSearchVal)
		}
	}, [tableAll, tab, actualSearchVal, superMtNum])
	useEffect(() => {
		if (superMtNum === 0 && tab === 'often') {
			getListFromTable(tableOften, actualSearchVal)
		}
	}, [tableOften, tab, actualSearchVal, superMtNum])
	useEffect(() => {
		if (superMtNum === 1) {
			setTab('interactive')
			getListFromTable(tableInteractive, actualSearchVal)
		}
	}, [tableInteractive, actualSearchVal, superMtNum])
	useEffect(() => {
		let o = list.filter((x) => x.mcc.status.isOnline)
		setOnlineList(o)
	}, [list])
	return (
		<StyledMemberList className="member-list-wrap" height={height}>
			{superMtNum === 0 && !!SWITCH.showOftenMt && (
				<Tab
					className="member-tab"
					type="button"
					data={[
						{
							label: t('全部终端'),
							value: 'all',
						},
						{
							label: t('常用终端'),
							value: 'often',
						},
					]}
					value={tab}
					onChange={(e, val) => {
						setTab(val)
						handleSearch('')
					}}
				/>
			)}
			<Search
				className="search"
				iconAlign="left"
				placeholder={t('请输入关键词搜索')}
				value={searchVal}
				onChange={(e, val) => handleSearch(val)}
				onClear={() => handleSearch('')}
				clearable
			></Search>
			<div className="member-list">
				<AutoSizer>
					{({ width, height }) => {
						return (
							<List
								width={width}
								height={height}
								itemCount={onlineList.length}
								itemSize={36}
								itemData={{ list: onlineList, isCascade, canDrag, openMap, tab, setOpenMap }}
								itemKey={(index, data) => data.list[index].mtKey}
							>
								{rowRenderer}
							</List>
						)
					}}
				</AutoSizer>
			</div>
		</StyledMemberList>
	)
}
